<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图书列表展示</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />

    <link rel="stylesheet" href="css/list.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script src="js/jq-paginator.js"></script>
  </head>

  <body>
    <div class="bookContainer">
      <h2>图书列表展示</h2>
      <div class="navbar-justify-between">
        <div>
          <button
            class="btn btn-outline-info"
            type="button"
            onclick="location.href='book_add.html'"
          >
            添加图书
          </button>
          <button
            class="btn btn-outline-info"
            type="button"
            onclick="batchDelete()"
          >
            批量删除
          </button>
        </div>
      </div>

      <table>
        <thead>
          <tr>
            <td>选择</td>
            <td class="width100">图书ID</td>
            <td>书名</td>
            <td>作者</td>
            <td>数量</td>
            <td>定价</td>
            <td>出版社</td>
            <td>状态</td>
            <td class="width200">操作</td>
          </tr>
        </thead>
        <tbody></tbody>
      </table>

      <div class="demo">
        <ul id="pageContainer" class="pagination justify-content-center"></ul>
      </div>
      <script>
        getBookList();
        function getBookList() {
          $.ajax({
            type: "get",
            url: "/book/getBookList" + location.search,
            success: function (result) {
              //console.log(result);
              if(result.status == "UNLOGIN") {
                alert("用户未登录");
                location.href = "login.html";
              }
              if (result.status == "SUCCESS") {
                let finalHtml = "";
                for (let book of result.data.records) {
                  finalHtml += "<tr>";
                  finalHtml +=
                    '<td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td>';
                  finalHtml += "<td>" + book.id + "</td>";
                  finalHtml += "<td>" + book.bookName + "</td>";
                  finalHtml += "<td>" + book.author + "</td>";
                  finalHtml += "<td>" + book.count + "</td>";
                  finalHtml += "<td>" + book.price + "</td>";
                  finalHtml += "<td>" + book.publish + "</td>";
                  finalHtml += "<td>" + book.statusCN + "</td>";
                  finalHtml += '<td><div class="op">';
                  finalHtml +=
                    '<a href="book_update.html?bookId=' +
                    book.id +
                    '">修改</a>';
                  finalHtml +=
                    '<a href="javascript:void(0)" onclick="deleteBook(' +
                    book.id +
                    ')">删除</a>';
                  finalHtml += "</div></td></tr>";
                }
                $("tbody").html(finalHtml);

                //翻页信息
                $("#pageContainer").jqPaginator({
                  totalCounts: result.data.total, //总记录数
                  pageSize: 10, //每页的个数
                  visiblePages: 5, //可视页数
                  currentPage: result.data.pageRequest.currentPage, //当前页码
                  first:
                    '<li class="page-item"><a class="page-link">首页</a></li>',
                  prev: '<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页<\/a><\/li>',
                  next: '<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页<\/a><\/li>',
                  last: '<li class="page-item"><a class="page-link" href="javascript:void(0);">最后一页<\/a><\/li>',
                  page: '<li class="page-item"><a class="page-link" href="javascript:void(0);">{{page}}<\/a><\/li>',
                  //页面初始化和页码点击时都会执行
                  onPageChange: function (page, type) {
                    console.log("第" + page + "页, 类型:" + type);

                    if (type == "change") {
                      location.href = "book_list.html?currentPage= " + page;
                    }
                  },
                });
              }
            },
          });
        }

        function deleteBook(id) {
          var isDelete = confirm("确认删除?");
          if (isDelete) {
            $.ajax({
              type: "post",
              url: "/book/updateBook",
              data: {
                id: id,
                status: 0,
              },
              success: function () {
                //重新刷新⻚⾯
                location.href = "book_list.html";
              },
            });
          }
        }

        function batchDelete() {
          var isDelete = confirm("确认批量删除?");
          if (isDelete) {
            //获取复选框的id
            var ids = [];
            $("input:checkbox[name='selectBook']:checked").each(function () {
              ids.push($(this).val());
            });
            console.log(ids);
            $.ajax({
              type: "post",
              url: "/book/batchDeleteBook?ids=" + ids,
              success: function (result) {
                if (result == "") {
                  alert("删除成功");
                  //重新刷新⻚⾯
                  location.href = "book_list.html";
                } else {
                  console.log(result);
                  alert(result);
                }
              },
            });
            alert("批量删除成功");
          }
        }
      </script>
    </div>
  </body>
</html>
